﻿<!DOCTYPE html>
<html ng-app="scopesApp">
<head>
    <title></title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/jquery-1.11.0.min.js"></script>
    <script src="scripts/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="scripts/angular.min.js"></script>
    <script>
        angular.module("scopesApp", [])
        .controller("simpleCtrl", function ($scope) {
            $scope.buttonEnabled = true;
            $scope.clickCounter = 0;
            $scope.handleClick = function () {
                $scope.clickCounter++;
            }
            $scope.$watch('buttonEnabled', function (newValue) {
                $('#jqui button').button({
                    disabled: !newValue
                });
            });
        });

        $(document).ready(function () {
            $('#jqui button').button().click(function (e) {
                angular.element(angularRegion).scope().$apply('handleClick()');
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div id="angularRegion" class="well" ng-controller="simpleCtrl">
            <h4>AngularJS</h4>
            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="buttonEnabled"> 启用按钮
                </label>
            </div>
            Click counter: {{clickCounter}}
        </div>
        <div id="jqui" class="well">
            <h4>jQuery UI</h4>
            <button>Click Me!</button>
        </div>
    </div>
</body>
</html>
